<template>
	<view>
        <search-header @search-results-updated="handleSearchResultsUpdated"></search-header>
		<view class="search-list" v-if="goodList.length > 0">
			<view class="search-list-li" v-for="item in goodList" :key="item.id" @tap="routerDetail(item)">
				<image class="search-list-Image" :src="item.spuUrls[0]" mode=""></image>
				<text class="search-list-Text">{{ item.name }}</text>
			</view>
		</view>
		<view v-else class="empty">
			<u-empty  mode="search"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:null,
				historyData : [
					{
						id : 0,
						name : '净水器'
					},
					{
						id : 1,
						name : '净水器'
					},
					{
						id : 2,
						name : '净水器'
					},
					{
						id : 3,
						name : '净水器'
					},
					{
						id : 4,
						name : '净水器'
					},
					
				],
				goodList:''
			};
		},
		methods:{
			handleSearchResultsUpdated({ statusFlag, searchResults }) {
			    // 在这里处理传递过来的 searchResults 数据
			    this.goodList = searchResults
				
				this.flag = statusFlag
				
				console.log(this.goodList)
			},
			//跳转详情页
			routerDetail(item){
				if(item.categorySecondId === "1498510397314220034"){
					uni.navigateTo({
						url:`/subpkg/beauty/beautyDetails/beautyDetails?id=${item.id}`
					})
				}else{
					uni.navigateTo({
						url:`/subpkg/goods/goods-detail/index?id=${item.id}`
					})
				}
			},
		}
	}
</script>

<style lang="scss">
.empty{
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.search-list-Text{
	font-size: 26rpx;
	color: #333;
	margin-top: 10px;
	margin-bottom: 10px;
}
.search-list{
	width: 95%;
	margin: 10px auto;
	justify-content: space-between;
	flex-wrap: wrap;
	display: flex;
	.search-list-li{
		width: 48%;
		margin-bottom: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 20px 10px 20px;
		border-radius: 5px;
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
		.search-list-Image{
			width: 100%;
			height: 250rpx;
			
			border-radius: 5px;
		}
	}
}
</style>
